<template>
	<view class="tabs">
		<view class="headBar">
			<scroll-view id="tab-bar" class="scroll-h" :scroll-x="true" :show-scrollbar="false"
				:scroll-into-view="scrollInto">
				<view v-for="(tab,index) in tabBars" :key="tab.id" class="uni-tab-item" :id="tab.id"
					:data-current="index" @click="getSubCategory">
					<text class="uni-tab-item-title"
						:class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
				</view>
			</scroll-view>
		</view>
		<view class="main">
			<scroll-view id="tab-bar" class="scroll-y mainLeft" :scroll-y="true" :show-scrollbar="false"
				:scroll-into-view="scrollInto">
				<view v-for="(tab,index) in tabBarsLeft" :key="tab.id" class="uni-tab-item" :id="tab.id"
					:data-current="index" @click="getThreeCategory">
					<text class="uni-tab-item-title"
						:class="tabLeftIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
				</view>
			</scroll-view>
			<view class="mainRight" style="background-color: aliceblue;">
				<scroll-view id="tab-bar" class="scroll-h" :scroll-x="true" :show-scrollbar="false"
					:scroll-into-view="scrollInto">
					<view v-for="(tab,index) in tabBarsRight" :key="tab.id" class="uni-tab-item" :id="tab.id"
						:data-current="index">
						<text class="uni-tab-item-title"
							:class="tabRightIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
					</view>
				</scroll-view>
				<view class="bookListMain">
					<view class="bookList">
						<view v-for="book in bookList" :key="book.uuid" @click="goCategory(JSON.stringify(book))">
							<image mode="aspectFit" src="@/static/image/book.jpg"></image>
							<text class="title">{{book.title}}</text>
							<view :title="book.author">作者: {{book.author}}</view>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/request/api.js';
	export default {
		data() {
			return {
				tabBars: [],
				tabIndex: 0,
				tabRightIndex: 0,
				tabBarsRight: [],
				tabLeftIndex: 0,
				tabBarsLeft: [],
				id: 1,
				subId: 2,
				bookList: [],
			}
		},
		onLoad() {
			this.getData(this.id, this.subId) //一级分类的id和二级分类的id
			this.getBookList(0)
		},
		methods: {
			getData(id, subId) {
				this.tabBars = [];
				this.tabBarsLeft = [];
				this.tabBarsRight = [];
				api.get('/category/v1/getAll')
					.then(response => {
						response.list.forEach(item => {
							this.tabBars.push({
								name: item.name,
								id: item.id
							})
							if (item.id == id) {
								if (item.hasOwnProperty('childNode') && (item.childNode !== '' || item
										.childNode !== null)) {
									item.childNode.forEach((list) => {
										this.tabBarsLeft.push({
											name: list.name,
											id: list.id
										})
										if (list.id == subId) {
											if (list.hasOwnProperty('childNode') && (list.childNode !==
													'' || list.childNode !== null)) {
												list.childNode.forEach(child => {
													this.tabBarsRight.push({
														name: child.name,
														id: child.id
													})
												})
											}
										}
									})
								}
							}
						})
					})
					.catch(error => {
						console.error(error);
					});
			},
			getSubCategory(e) { //获取二级分类
				this.id = e.currentTarget.id
				this.getData(this.id, this.subId)
			},
			getThreeCategory(e) { //获取三级分类
				this.subId = e.currentTarget.id
				this.getData(this.id, this.subId)
			},
			getBookList(id) { //获取数据列表
				api.post('/book/v1/list', {
					id: id
				}).then(res => {
					this.bookList = res.list
				}).catch(err => {
					console.log(err)
				})
			},
			goCategory(str){
				uni.navigateTo({
				  url: '/pages/component/bookCategory/bookCategory?bookInfo='+str
				  })
			}
		}
	}
</script>

<style scoped>
	/* #ifndef APP-PLUS */
	page {
		width: 100%;
		min-height: 100%;
		display: flex;
	}

	/* #endif */

	.tabs {
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		background-color: #ffffff;
		/* #ifndef APP-PLUS */
		height: 100vh;
		/* #endif */
	}

	.headBar .scroll-h {
		width: 750rpx;
		/* #ifdef H5 */
		width: 100%;
		/* #endif */
		height: 80rpx;
		position: fixed;
		top: 0rpx;
		left: 0;
		right: 0;
		border-bottom: 1px solid #cccccc;
		background: #fff;
		z-index: 1000;
		flex-direction: row;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
		text-align: center;
	}

	.mainRight .scroll-h {
		width: 750rpx;
		/* #ifdef H5 */
		width: 100%;
		/* #endif */
		height: 80rpx;
		/* position: fixed;
		top: 80rpx;
		left: 0;
		right: 0; */
		border-bottom: 1px solid #cccccc;
		background: #fff;
		z-index: 1000;
		flex-direction: row;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	.line-h {
		height: 1rpx;
		background-color: #cccccc;
	}

	.headBar /deep/.uni-scroll-view-content {
		text-align: center;
	}

	.uni-tab-item {
		/* #ifndef APP-PLUS */
		display: inline-block;
		/* #endif */
		flex-wrap: nowrap;
		padding-left: 34rpx;
		padding-right: 34rpx;
	}

	.uni-tab-item-title {
		color: #555;
		font-size: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		flex-wrap: nowrap;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	.uni-tab-item-title-active {
		color: #007AFF;
	}

	.main {
		display: flex;
		justify-content: flex-start;
		margin-top: 84rpx;
	}

	.main .mainLeft {
		width: 20%;
		height: 100%;
		border-right: 1rpx solid #ccc;
	}

	.main .mainRight {
		width: 80%;
		height: 100%;
		background: #c4f7c7;
	}

	.main .uni-tab-item {
		/* width: 80%; */
		height: 100%;
	}

	.main .mainRight .uni-tab-item {
		/* width: 40rpx; */
		text-align: center;
		height: 100%;
	}

	.bookListMain {
		overflow-y: scroll;
		height:512px;
		/* margin-bottom:60px; */
	}

	.bookList {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.bookList view {
		width: 30%;
		height:124px;
		position: relative;
		margin-top: 10rpx;
		margin-left: 2.5%;
	}

	.bookList view:last-child {
		margin-right: 2.5%;
	}

	.bookList view image {
		width: 100%;
		height: 240rpx;
	}
   /* .bookList view{
		width: 30
		background:#fff;
	} */
	.bookList view>text.title {
		width: 30%;
		text-align: center;
		border:1px solid #f5ef2f;
		font-size: 29rpx;
		position: absolute;
		top: 2px;
		left: 13px;
		background:#fff;
		box-shadow: 2px 5px 10px #f7facb;
	}
   /* .bookList view>text.title>span{
		display:inline-block;
		width: 90%;
		height:90%;
		background:#fff;
		margin:0 auto;
		border:1px solid #f00;
		position: absolute;
		top: 4px;
		left: 13px;
	} */
	.bookList view view {
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 29rpx;
	}
</style>